<template>
	<view class="page-wrap">
		<view class="poster-box fboxWrap Ycenter Xcenter">
			
			<view class="card-modal">
				<!-- <view class="close fboxCol Ycenter Xcenter" @click="close()">
					<u-icon name="close" color="#ffffff" size="14"></u-icon>
				</view> -->
				<swiper class="swiper" circular :current="active" :indicator-dots="false" :autoplay="false" :interval="2000"
					:duration="500" @change="swiperChange">
					<swiper-item v-for="(item, index) in innerData.posterBackgroundUrl" :key="index">
						<view class="card" :id="'dataHuman'+index">
							<view class="hd bg-white">
								<img class="pic" :src="item" mode="" />
							</view>
							<view class="bd fboxRow Yend bg-white">
								<img class="avatar" :src="innerData.avatar" mode="aspectFill" />
								<view class="fboxCol Xcenter font24 flex1">
									<view class="name font36 font-weight color-0F0400">{{innerData.realName}}</view>
									<view class="industry mt30 font20 color-999796">{{innerData.industry}}</view>
								</view>
								<view class="code fboxCol Ycenter Xcenter">
									<img class="qrcode" :src="innerData.codeUrl" mode="" />
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item v-if="innerData.dataHumanSucceedImage">
						<view class="card" id="dataHuman">
							<view class="hd bg-white">
								<img class="video-img" :src="innerData.dataHumanSucceedImage" mode="aspectFill" />
								<img class="pic" :src="videoBg" mode="widthFix" />
								<view class="name fboxCol Ycenter Xcenter font28 font-weight color-0F0400">
									{{innerData.realName}}
								</view>
							</view>
							<view class="bd fboxRow bg-white">
								<img class="avatar" :src="innerData.avatar" mode="aspectFill" />
								<view class="fboxCol Xcenter font24 flex1">
									<view class="name font36 font-weight color-0F0400">{{innerData.realName}}</view>
									<view class="industry mt30 font20 color-999796">{{innerData.industry}}</view>
								</view>
								<view class="code fboxCol Ycenter Xcenter">
									<img class="qrcode" :src="innerData.codeUrl" mode="" />
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="canvas-fixed" id="canvas-fixed"><canvas id="firstCanvas" style="width: 265px; height: 472px;" canvas-id="firstCanvas"></canvas>
				</view>
				<view class="indicator-dots fboxRow Ycenter Xcenter" v-if="innerData.dataHumanSucceedImage">
					<view class="dot" v-for="(item, index) in 4" :key="index" :class="{active: index==active}"></view>
				</view>
				<view class="indicator-dots fboxRow Ycenter Xcenter" v-else>
					<view class="dot" v-for="(item, index) in 3" :key="index" :class="{active: index==active}"></view>
				</view>
				<view class="action-bottom fboxRow Ycenter font-white font24">
					<view class="flex1 fboxCol Ycenter">
						<view class="icon fboxCol Ycenter Xcenter" @click="downloadPic">
							<u-icon name="download" color="#ffffff" size="22"></u-icon>
						</view>
						<view class="tit mt10">下载</view>
					</view>
					<view class="flex1 fboxCol Ycenter">
						<view class="icon fboxCol Ycenter Xcenter" @click="shareSystem">
							<u-icon name="share-square" color="#ffffff" size="22"></u-icon>
						</view>
						<view class="tit mt10">分享</view>
					</view>
				</view>
				<!-- <view class="fboxRow Ycenter Xcenter font-white font20">{{version}}</view> -->
			</view>
			
		</view>
		<ModalBrowser :show.sync="isBrowser" />
		
	</view>
</template>
<script>
	import ModalBrowser from '../components/modal-browser/index.vue';
	import {
		digitalPersonInfo,
		Base64toUrl
	} from '@/api/card.js';
	import html2canvas from '@/static/js/html2canvas.min.js'
	
	
	export default {
		components: {
			ModalBrowser
		},
		data() {
			return {
				active: 3,
				code: '',
				tempFilePath: '',
				videoBg: 'https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/video-bg.png',
				innerData: {},
				version: '1.3',
				sys: {},
				isBrowser: false
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.memberId = option.id
				this.getInit()
			}
			uni.getSystemInfo({
				success: (resSystem) => {
					this.sys = resSystem
					// alert(JSON.stringify(resSystem))
				}
			})
		},
		methods: {
			getInit() {
				digitalPersonInfo({
					memberId: this.memberId
				}).then(res => {
					this.innerData = res.data
					if(res.data.dataHumanSucceedImage){
						this.active = 3
					}else{
						this.active = 0
					}
					uni.setNavigationBarTitle({
						title: `数字海报`
					})
				})
			},
			swiperChange(e) {
				this.active = e.detail.current
			},
			close() {
				this._show = false
				// console.log('close');
			},
			qrcodeImg(e) {
				this.code = e
				console.log('qrcodeImg', e)
				// console.log(base64ToPath(e))
				// this.getPic()
			},
			shareSystem() {
				// http://ebc-test.benwunet.com/datahuman/#/mine/poster?id=vip00000001006
				const origin = window.location.origin
				const h5 = '/datahuman/#/CardDetail?id=' + this.memberId
				// const h5 = '/datahuman/#/card/detail?id=' + this.memberId
				uni.setClipboardData({
					data: origin + h5,
					showToast: false,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '分享地址已复制，去分享给朋友吧'
						})
						console.log('success');
					}
				});
			},
			async getPic() {
				uni.showLoading({
					title: '图片正在生成中'
				})
				try {
					// #ifdef H5
						const id = this.active < 3 ? '#dataHuman'+this.active : '#dataHuman'
						this.$nextTick(()=>{
							this.htmlSave(id)
						})
					// #endif
				} catch (e) {
					// error
					// console.log(e)
					console.error(e)
					// ctx.clearRect()
					// ctx.restore()
					uni.hideLoading()
				}
			},
			htmlSave(id){
				console.log(id)
				console.log('htmlSave')
				const dom = document.querySelector(id)
				html2canvas(dom,{
					width: dom.clientWidth,
					height: dom.scrollHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true,
					// allowTaint: true
				}).then((canvas)=>{
					const base64 = canvas.toDataURL('image/jpg')
					this.postBase64(base64)
					// this.base64DownloadFile(base64)
					console.log(base64)
				})				
			},
			postBase64(base64){
				const _this = this
				Base64toUrl({
					content: JSON.stringify(base64),
					suffix: ".jpg"
				}).then(urlRes => {
					uni.hideLoading()
					console.log(urlRes)
					var link = document.createElement('a');
					//把a标签的href属性赋值到生成好了的url
					// link.href = dres.tempFilePath;
					link.href = urlRes.data.url;
					//通过a标签的download属性修改下载图片的名字
					link.title = _this.innerData.realName + (new Date().getTime()) + '.jpg';
					link.download = (new Date().getTime()) + '.jpg';
					// link.download = _this.innerData.realName + (new Date().getTime()) + '.jpg';
					//让a标签的click函数，直接下载图片
					link.click();
				})
			},
			base64DownloadFile(content) {
				uni.downloadFile({
					url: content,
					success: (dres) => {
						console.log(dres);
						//创建一个a标签
						var link = document.createElement('a');
						//把a标签的href属性赋值到生成好了的url
						link.href = dres.tempFilePath;
						// link.href = 'https://ebc-prod.cdn.benwunet.com/e86321f6afa242c781a767cb1c03330c.png';
						//通过a标签的download属性修改下载图片的名字
						link.download = this.innerData.realName + (new Date().getTime()) + '.jpg';
						//让a标签的click函数，直接下载图片
						link.click();
						uni.hideLoading()
					},
					fail: (err) => {
						console.log(err);
						uni.hideLoading()
					}
				})
			},
			drawText(text, x, y, num, fs, color, ctx) {
				// 1 将字符串转换成数组
				let test = text.split("")
				let row = []
				// // 1.1 设置样式
				ctx.setFontSize(fs)
				ctx.fillStyle = color
				// 1.2 计算文字宽度，若文字宽度大于设定的宽度，则push到数组下一个元素，否则将字符串++
				for (let i = 0; i < test.length; i++) {
					const a = text.substring(i, i + num);
					row.push(a)
					i = (i + num) - 1
				}
				// 1.4 遍历数组,输出文字
				for (let j = 0; j < row.length; j++) {
					ctx.fillText(row[j], x, y + ((j * 1.3) * fs))
					// ctx.fillText( row[j], x, y+(j+1) * fs + fs)
				}
				ctx.stroke()
			},
			downloadPic() {
					// this.isBrowser = true
					// console.log(this.isBrowser)
				// _this.sys.ua.indexOf('DingTalk') != -1 ||
				if (this.sys.ua.indexOf('WeChat') != -1) { //判断是微信
					this.isBrowser = true
				} else {
					this.getPic()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page-wrap {
		height: calc(100vh);
		background: #cf2920 url('https://ebc-prod.cdn.benwunet.com/uni-static/activity-year/bg-code.jpg') top center;
		background-size: 750rpx auto;
	}
	.poster-box{height: calc(100vh);}

	.card-modal {
		position: relative;
		width: 530rpx;
		/* height: 1090rpx; */
		/* padding-bottom: 100rpx; */
	}

	/* .canvas-fixed{position: fixed;top: 30rpx;left: 30rpx;} */
	.canvas-fixed {
		position: fixed;
		top: -1000px;
		left: -1000px;
	}

	.card {
		width: 530rpx;
		height: 756rpx;
	}

	.canvas-box {
		width: 530rpx;
		height: 944rpx;
	}

	.swiper {
		width: 530rpx;
		height: 944rpx;
		z-index: 2;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
	}

	.card-modal .close {
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		z-index: 3;
	}

	.indicator-dots {
		margin-top: 30rpx;
	}

	.indicator-dots .dot {
		margin: 0 6rpx;
		width: 12rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, .4);
		border-radius: 50%;
	}

	.indicator-dots .dot.active {
		background: #fff;
	}

	.hd {
		position: relative;
		width: 530rpx;
		height: 756rpx;
	}

	.hd .name {
		position: absolute;
		left: 47rpx;
		top: 530rpx;
		z-index: 4;
		color: #720800;
		text-align: center;
		line-height: 40rpx;
		width: 40rpx;
		height: 160rpx;
		overflow: hidden;
	}

	.video-img {
		position: absolute;
		left: -132rpx;
		top: 0;
		z-index: 1;
		width: 796rpx;
		height: 530rpx;
	}

	.pic {
		width: 100%;
		min-width: 530rpx;
		height: 756rpx;
		position: relative;
		z-index: 2;
	}

	.close {
		width: 44rpx;
		height: 44rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
	}

	.avatar {
		margin-right: 20rpx;
		width: 116rpx;
		height: 116rpx;
		border-radius: 12rpx;
	}

	.bd {
		padding: 36rpx 30rpx;
	}

	.industry {
		margin-bottom: 12rpx;
	}

	.card-popup /deep/ .u-popup__content {
		background: none;
	}

	.qrcode {
		width: 80rpx;
		height: 80rpx;
	}

	.code .tit {
		margin-top: 8rpx;
	}

	.action-bottom {
		margin-top: 40rpx;
	}

	.action-bottom .icon {
		width: 68rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, .3);
		border-radius: 50%;
	}
</style>
